<template>
	<view class="content">
		<button @click="print">打印</button>
		<view class="yt-lu" v-for="(items, i) in vs" :key="items">
			<view class="yt-list" v-for="(item, j) in items" :key="item">
				<button @click="yt_btn" :data-id="item.id" :data-level="i">{{ item.title }}</button>
			</view>
		</view>
	</view>
</template>

<script>
import yt from './yt'
export default {
	data() {
		return {
			vs: [[{ id: '1', title: "吃饭了吗" }]],
			from: []
		}
	},
	onLoad() {

	},
	methods: {
		yt_btn(e) {
			console.log(e);
			let id = e.currentTarget.dataset.id
			let level = e.currentTarget.dataset.level
			const that = this
			yt.request(id).then(e => {
				console.log(e);
				// 清除当前层级之后的数据
				that.vs.splice(level + 1, that.vs.length - level)
				that.vs[level + 1] = e
			})

			this.from[level] = id
			// 清除当前层级之后的数据
			this.from.splice(level + 1, this.vs.length - level)
		},
		// 打印 from
		print() {
			console.log(this.from);
		}
	}
}
</script>

<style>
.yt-lu {
	display: flex;
	flex-direction: row;
	margin: 10px 5px 0px 2px;
}
</style>
